<template>
	<view class="integralMall">
		<!-- <product-swiper :imgUrls="swiperList"></product-swiper> -->
		<view class="" style="position: relative;">
			<image class="imgimg" style="width: 100%;height: 486rpx;" :src="goodsInfo.image2" mode=""></image>
			<view class="white"></view>
		</view>
		
		<view class="padBox uppadBox">
			<view class="goodsName" style="color: #000;">{{goodsInfo.name}}</view>
			 <view class="primary flex">
				<view class="rowtit">{{goodsInfo.need_integral}}<text class="rowtext">积分</text></view>
				<view v-if="goodsInfo.exchange_way!=1" class="rowtit">+{{goodsInfo.need_money}}<text class="rowtext">成长值</text></view>
				<view class="muted" style="font-size: 26rpx; margin-left: 28rpx; margin-top: 12rpx;" v-if="goodsInfo.market_price > 0">
					市场价 <price-format :first-size="30" :second-size="24" :subscript-size="26"
						:price="goodsInfo.market_price"></price-format>
				</view>
			</view>
			<view class="sixbox flex-start">
				<view class="sixrow flex-start">
					<image class="sixImg" src="../static/image/Group66.png" mode=""></image>
					<view style="color: #f29d27;">不可退</view>
				</view>
				<view class="sixrow flex-start">
					<image class="sixImg" src="../static/image/Group67.png" mode=""></image>
					<view>免预约</view>
				</view>
			</view>
		</view>
		<view class="padBox" style="margin-top: 116rpx;color: #000;">
			<view class="purchase">购买须知</view>
			<u-parse :html="goodsInfo.content" :lazy-load="true" :show-with-animation="true"></u-parse>
		</view>
		<view class="footer flex bg-white fixed">
				<view class="right-buy" @tap="showSpecFun()">立即兑换</view>
		</view>
		<u-popup v-model="showPop" mode="bottom" border-radius="14" :closeable="true" @close="onClose"
        :safe-area-inset-bottom="true">
        	<view class="bg-white spec-contain"style="background-color: #f6f6f6;">
				<view class="dui">确认订单</view>
				<view class="flex-start duiBox">
					<image class="imgimg" style="width: 180rpx;height: 140rpx;" :src="goodsInfo.image2" mode=""></image>
					<view class="" style="margin-left: 20rpx;">
						<view class="goodsName" style="margin: -16rpx 0 30rpx 0;">{{goodsInfo.name}}</view>
						<view class="sixbox flex-start">
							<view class="sixrow flex-start">
								<image class="sixImg" src="../static/image/Group66.png" mode=""></image>
								<view style="color: #f29d27;">不可退</view>
							</view>
							<view class="sixrow flex-start">
								<image class="sixImg" src="../static/image/Group67.png" mode=""></image>
								<view>免预约</view>
							</view>
						</view>
					</view>
				</view>
				<view class="numBox_s">
					<view class="flex-s numBox" style="border-bottom: 4rpx #f9f9f9 solid;">
					    <view class="label" >数量</view>
					    <u-number-box v-model="goodsNum" :min="1" :max="2"></u-number-box>
					    <!-- <u-number-box v-model="goodsNum" disabled :min="1" :max="checkedGoods.stock"></u-number-box> -->
					</view>
					<!-- <view class="">
						<view class="label">账号类型：</view>
						<u-radio-group v-model="accountType" class="flex-1" @change="radioChange" >
							<view class="payway" style="margin-right: 50rpx;">
									<u-radio shape="circle" :name="1" :active-color="colorConfig.primary">手机号</u-radio>
							</view>
							<view class="payway">
									<u-radio shape="circle" :name="2" :active-color="colorConfig.primary">QQ号</u-radio>
							</view>
						</u-radio-group>
					</view> -->
					<view class="flex-s numBox">
						<view class="label">手机号</view>
						<input type="number" v-model="rechargeAccount"placeholder="请输入手机号">
						<!-- <u-field v-model="rechargeAccount" :label-width="1" label=" 手机号：" :border-bottom="false"
											placeholder="请输入您的账号">
										</u-field> -->
					</view>
				</view>
			 <view class="btns flex row-between bg-white">
	                <template>
	                	<button :loading="showLoading" :disabled="showLoading" v-if="userInfo.user_integral>=needIntegral" class="bg-primary br60  btn" size="lg"
	                	    @click="onClick('confirm')" style="color: white;">确定兑换</button>
	                	<button v-else class="bg-gray br60 white btn" size="lg">积分不足</button>
	                </template>
	            </view>
	        </view>
	    </u-popup>

		<!-- <u-popup v-model="showPop" mode="bottom" border-radius="14" :closeable="true" @close="onClose"
        :safe-area-inset-bottom="true">
        <view class="bg-white spec-contain">
            <view class="header flex" v-if="checkedGoodsId!=''">
                <u-image width="160rpx" height="160rpx" class="m-r-20" border-radius="10rpx"
                    @click="previewImage(checkedGoods.image)" :src="checkedGoods.image"></u-image>
                <view class="goods-info" style="padding-top: 30rpx;">
                	<view style="font-size: 28rpx;color: #333;margin-bottom: 10rpx">{{checkedGoods.name}}</view>
                    <view class="primary flex">
                    	<text>积分:{{needIntegral}}</text>
                    	<text v-if="checkedGoods.exchange_way==2">+</text>
                        <price-format v-if="checkedGoods.exchange_way==2" :first-size="46" :second-size="32" :subscript-size="32"
                            :price="checkedGoods.need_money" :weight="500" />
                    </view>
                </view>
            </view>
            <view class="spec-main" style="height: 550rpx;">
                <scroll-view style="max-height: 500rpx;" scroll-y="true">
                    <view class="spec-list">
                        <view class="spec">
                            <view class="name m-b-20">
                                选择规格
                                
                            </view>
                            <view class="flex flex-wrap">
                                <view v-for="(item, index) in specList" :key="index" :class="checkedGoodsId==item.id?'checked spec-item sm':'spec-item sm'" @click="choseSpecItem(index)">
                                   {{ item.name }}
                                </view>
                            </view>							
                        </view>
                    </view>
                </scroll-view>
                <view class="good-num flex row-between m-l-20 m-r-20">
                    <view class="label">数量</view>
                    <u-number-box v-model="goodsNum" :min="1" :max="checkedGoods.stock"></u-number-box>
                </view>
            </view>
            <view class="btns flex row-between bg-white">
                <template>
                	<button :loading="showLoading" :disabled="showLoading" v-if="userInfo.user_integral>=needIntegral" class="bg-primary br60 white btn" size="lg"
                	    @click="onClick('confirm')">确定兑换</button>
                	<button v-else class="bg-gray br60 white btn" size="lg">积分不足</button>
                </template>
            </view>
        </view>
    </u-popup> -->

	</view>
</template>

<script>
	import { mapMutations, mapActions, mapGetters } from "vuex";
	import {
		getIntegralGoods
	} from '@/api/activity'
	import customSwiper from '@/components/blackmonth-swiper/index'
	import {
		integralGoodsTypeList,
		integralSubmitAttOrder
	} from "@/api/store"
	export default {
		components: { customSwiper },
		data() {
			return {
				accountType:1,
				rechargeAccount:'',
				goodsInfo:{},
				checkedGoodsId:'',
				needIntegral:'',
                goodsNum: 1,
                showPop: false,
                showLoading:false,
				checkedGoods: {
					// stock: 5,
                }, //选中的
				swiperList:[],
				specList:[
				]
			}
		},
		onLoad(options) {
			// this.goodsInfo=JSON.parse(this.$Route.query.obj)
			this.goodsInfo=JSON.parse(decodeURIComponent(this.$Route.query.obj))
			this.swiperList=[]
			this.swiperList.push({
				uri:this.goodsInfo.image
			})
			this.rechargeAccount=this.userInfo.mobile
			console.log('7',this.goodsInfo)
			
		},
		computed: {
		    ...mapGetters(["userInfo", "appConfig"]),
		},
		methods: {
			 // 选择规格
            choseSpecItem(index, index2) {
                const id = this.specList[index].id;
                this.needIntegral= this.specList[index].need_integral
                this.checkedGoods= this.specList[index]
               	this.checkedGoodsId=id
            },
			radioChange(type){
				this.accountType=type
				if(type==1){
					this.rechargeAccount=this.userInfo.mobile
				}else{
					this.rechargeAccount=''
				}
			},
			showSpecFun(){
				this.showPop=true
			},
			onClose() {
			},
			onClick(){
				console.log(this.rechargeAccount)
            	if(this.rechargeAccount==''){
            		this.$toast({
						title: '请输入账号'
					});
					return
            	}
            	this.showLoading=true
				integralSubmitAttOrder({
					id: this.goodsInfo.id,
					user_id: this.userInfo.id,
					client:1,
					num: this.goodsNum,
					accountType:1,
					rechargeAccount: this.rechargeAccount,
				}).then(res => {
					if (res.code == 1) {
						const {
							type,
							order_id
						} = res.data
						if(this.goodsInfo.exchange_way==1) {
							this.$Router.replace({
								path: '/bundle/pages/pay_result/pay_result',
								query: {
									id: order_id,
									from: type
								}
							})
							return 
						}
						uni.$on('payment', params => {
							setTimeout(() => {
								if (params.result) {
									this.$Router.replace({
										path: '/bundle/pages/pay_result/pay_result',
										query: {
											id: params.order_id,
											from: params.from
										}
									})
								}else {
									this.$Router.replace({
										path: '/bundle/pages/exchange_order/exchange_order',
										query: {
											id: params.order_id,
											from: params.from
										}
									})
								}
							}, 1 * 1000)
						})
						this.$Router.push({
							path: '/bundle/pages/payment/payment',
							query: {
								order_id: order_id,
								from: type
							}
						})

            			this.showLoading=false
					}
				}).finally(() => {
					setTimeout(() => {
						this.showLoading = false
					}, 200)
				})
            }
            // onClick(){
            // 	if(this.checkedGoodsId==''){
            // 		this.$toast({
			// 			title: '请选择规格'
			// 		});
			// 		return
            // 	}
            // 	this.showLoading=true
			// 	integralSubmitAttOrder({
			// 		id: this.checkedGoodsId,
			// 		user_id: this.userInfo.id,
			// 		client:1,
			// 		num: 1,
			// 		accountType:1,
			// 		rechargeAccount: this.userInfo.mobile,
			// 	}).then(res => {
			// 		if (res.code == 1) {
			// 			const {
			// 				type,
			// 				order_id
			// 			} = res.data
			// 			if(this.checkedGoods.exchange_way==1) {
			// 				this.$Router.replace({
			// 					path: '/bundle/pages/pay_result/pay_result',
			// 					query: {
			// 						id: order_id,
			// 						from: type
			// 					}
			// 				})
			// 				return 
			// 			}
			// 			uni.$on('payment', params => {
			// 				setTimeout(() => {
			// 					if (params.result) {
			// 						this.$Router.replace({
			// 							path: '/bundle/pages/pay_result/pay_result',
			// 							query: {
			// 								id: params.order_id,
			// 								from: params.from
			// 							}
			// 						})
			// 					}else {
			// 						this.$Router.replace({
			// 							path: '/bundle/pages/exchange_order/exchange_order',
			// 							query: {
			// 								id: params.order_id,
			// 								from: params.from
			// 							}
			// 						})
			// 					}
			// 				}, 1 * 1000)
			// 			})
			// 			this.$Router.push({
			// 				path: '/bundle/pages/payment/payment',
			// 				query: {
			// 					order_id: order_id,
			// 					from: type
			// 				}
			// 			})

            // 			this.showLoading=false
			// 		}
			// 	}).finally(() => {
			// 		setTimeout(() => {
			// 			this.showLoading = false
			// 		}, 200)
			// 	})
            // }
		}
	}
</script>

<style  lang="scss" scoped>
	.white{
		width: 100%;
		height: 180rpx;
		background: linear-gradient( transparent 10%,#f6f6f6 90%);
		position: absolute;
		bottom: 0;
	}
	.purchase{
		font-size: 30rpx;
		font-weight: bold;
	}
	.numBox_s{
		background-color: #ffffff;
		padding: 0rpx 20rpx;
		margin: 0 10rpx;
		margin-top: 30rpx;
		margin-bottom: 130rpx;
	}
	.label{
		font-size: 30rpx;
		font-weight: bold;
	}
	.numBox{
		padding:24rpx 0;
	}
	.numBox input{
		width: 216rpx;
	}
	.duiBox{
		background-color: #ffffff;
		padding: 26rpx 20rpx;
		margin: 0 10rpx;
		margin-top: 30rpx;
	}
	.dui{
		text-align: center;
		font-weight: 900;
		font-size: 36rpx;
		margin-top: 20rpx;
	}
	
	.sixbox{
		width: 380rpx;
		margin-top: 20rpx;
		margin-bottom: 4rpx;
		padding: 8rpx 20rpx;
		background: linear-gradient(to right,#fff0e3,#ffffff) ;
		border-radius: 30rpx;
	}
	
	.sixImg{
		width: 30rpx;
		height: 30rpx;
		border-radius: 50rpx;
		margin-right: 18rpx;
	}
	.sixrow{
		margin-right: 36rpx;
	}
	.sixrow view{
		font-size: 24rpx;
		color: #62c179;
	}
	.rowtit{
		margin-top: 8rpx;
		color: #caa861;
		font-size: 40rpx;
	}
	.rowtext{
		font-size: 24rpx;
	}

	.padBox{
		width: 694rpx;
		margin: 0 auto;
		padding: 24rpx;
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 32rpx;
		z-index: 100;
	}
	.uppadBox{
		position: absolute;
		width: 700rpx;
		margin: 0 26rpx;
		margin-top: -166rpx;
	}
	.goodsName{
		font-size: 36rpx;
		font-weight: 900;
		// font-weight: bold;
		margin-top: 20rpx;
		margin-bottom: 16rpx;
	}
	.g-price{
		margin-right: 20rpx;
		display: inline-block;
		font-size: 40rpx;
		color: #f5335e;
	}
	.footer {
			height: 110rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			box-sizing: content-box;
			padding-bottom: env(safe-area-inset-bottom);

			.right-buy {
				color: #fff;
				text-align: center;
				line-height: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
				margin: 0 auto;
				width:88%;
				background-color: $-color-primary;
			}
	}
	.spec-contain {
        border-radius: 10rpx 10rpx 0 0;
        overflow: hidden;
        position: relative;

        .close {
            position: absolute;
            right: 10rpx;
            top: 10rpx;
        }

        .header {
            padding: 30rpx;
            padding-right: 70rpx;
            align-items: flex-start;
            border: $-solid-border;
        }

        .spec-main {
            padding: 0 24rpx;

            .spec-list {
                padding: 30rpx 20rpx;

                .spec-item {
                    line-height: 54rpx;
                    padding: 0 30rpx;
                    background-color: #F4F4F4;
                    border-radius: 60rpx;
                    margin: 0 20rpx 20rpx 0;
                    border: 1px solid #F4F4F4;

                    &.checked {
                        color: $-color-primary;
                        border-color: currentColor;
                    }

                    &.spec-disabled {
                        // opacity: .5;
						position: relative;
                    }
					&.spec-disabled::after {
						content: '缺货';
						position: absolute;
						right: -20rpx;
						top: -24rpx;
						color: $-color-white;
						width: 70rpx;
						height: 36rpx;
						text-align: center;
						line-height: 36rpx;
						font-size: 22rpx;
						border-radius: 20rpx 20rpx 20rpx 0;
						background-color: $-color-primary;
					}
					&.unspec-disabled::after {
						background-color: gray;
					}
                }
            }

        }
		        
		// 底部按钮无法选择
		.disabled {
		    opacity: 0.4;
		}
        
        .btns {
            height: 120rpx;
            padding: 0 30rpx;
            margin-top: 80rpx;

            .add-cart {
                background-color: #FF9E1E;
            }

            .btn {
                margin: 0 10rpx;
                flex: 1;
            }
        }

        .vip-price {
            margin: 0 24rpx;
            background-color: #FFE9BA;
            line-height: 36rpx;
            border-radius: 6rpx;
            overflow: hidden;

            .price-name {
                background-color: #101010;
                padding: 3rpx 12rpx;
                color: #FFD4B7;
                position: relative;
                overflow: hidden;

                &::after {
                    content: '';
                    display: block;
                    width: 20rpx;
                    height: 20rpx;
                    position: absolute;
                    right: -15rpx;
                    background-color: #FFE9BA;
                    border-radius: 50%;
                    top: 50%;
                    transform: translateY(-50%);
                    box-sizing: border-box;
                }
            }
        }
    }
</style>
